<template>
  <div>
    <div id="aside">
      <img style="float: left;" id="logo" src="@/assets/logo1.png" alt="logo" />
    </div>
    <div id="history">
      <!-- 遍历hittoryList显示 -->
      <div v-for="(item, index) in historyList" :key="index" style="margin-top: 10px;">
        <el-button id="historyItem" type="primary">{{ item }}</el-button>
      </div>
    </div>
    <div id="main">
      <!-- <el-button style="margin-top: 30px;" @click="show" type="primary">click</el-button> -->
      <el-input style="float: left; width: 60%;height: 55px;border-radius: 20px;position: relative;bottom: 0;" placeholder="请输入你的问题" v-model="message"></el-input>
    </div>


  </div>

</template>

<script>
export default {
  data() {
    return {
      historyList: [
        'history1',
        'history2',
        'history3',
        'history4',
        'history5',
        'history6',
        'history7',
        'history8',
        'history9',
        'history10',
        'history11',
        'history12',
        'history13',
        'history14',
        'history15',
        'history16',
        'history17',
        'history18',
        'history19',
        'history20',
        'history21',
        'history22',
        'history23',
        'history24',
        'history25',
        'history26',
        'history27',
        'history28',
        'history29',
        'history30',
        'history31',
        'history32',
        'history33',
        'history34',
        'history35',
        'history36',
        'history37',
        'history38',
        'history39',
        'history40453245423452345345345345345345',
        'history1',
        'history2',
        'history3',
        'history4',
        'history5',
        'history6',
        'history7',
        'history8',
        'history9',
        'history10',
        'history11',
        'history12',
        'history13',
        'history14',
        'history15',
        'history16',
        'history17',
        'history18',
        'history19',
        'history20',
        'history21',
        'history22',
        'history23',
        'history24',
        'history25',
        'history26',
        'history27',
        'history28',
        'history29',
        'history30',
        'history31',
        'history32',
        'history33',
        'history34',
        'history35',
        'history36',
        'history37',
        'history38',
        'history39',
        'history40453245423452345345345345345345',
      ],
      message: ''
    }

  },
  methods: {
    show() {
      this.$message.success('hello world........................')
    }

  }


}
</script>

<style scoped>
#aside {
  width: 4.3%;
  height: 100vh;
  float: left;
}

#history {
  width: 15%;
  /* height: 100vh; */
  height: 98vh;
  margin-top: 1vh;
  background-color: #fff;
  float: left;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow-y: scroll;
  overflow-x: hidden;

}

#historyItem {
  width: 80%;
  background: none;
  color: black;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  height: 40px;
  text-align: left;
}

#historyItem:hover {
  background-color: #F3F2FF;
  color: #6965EE;
}

#main {
  width: 80%;
  /* height: 100vh; */
  height: 98vh;
  margin-top: 1vh;
  background-color: #F7F8FC;
  float: left;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#logo {
  width: 90%;
  height: 55px;
  margin-top: 10px;
}

/deep/ .el-input {
  --el-input-border-radius: 30px;
  --el-input-border: none;
  --el-input-border-color: none;
  --el-input-hover-border-color: green;
  --el-input-focus-border-color: purple;
}








::-webkit-scrollbar {
  width: 7px;
  border-radius: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #E0E2EB;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #C6C4FF;
}
</style>